<template>
  <div>
    <div class="content">
        <el-row>
          <el-col>
            <el-form :inline="true" :model="formInline">
              <el-form-item>
                <el-input size="mini" v-model="formInline.title" placeholder="请输入题目"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select clearable size="mini" v-model="formInline.typeNum" placeholder="请选择题型">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="5">
          <el-row class="buttonList">
            <el-col>
              <el-button :disabled="addDisable" type="primary" size="mini" @click="newAddQues">新增题目</el-button>
              <el-button :disabled="isEdit" type="primary" size="mini" @click="editQues">编辑</el-button>
              <el-button type="danger" size="mini">启/禁用</el-button>
            </el-col>
          </el-row>
          <el-tree
            :data="data"
            :props="defaultProps"
            highlight-current
            accordion
            @node-click="treeNodeClick"
          >
          </el-tree>
        </el-col>
        <el-col :span="19">
          <el-table
            ref="multipleTable"
            :data="tableData"
            @selection-change="handleSelectionChange"
            tooltip-effect="dark"
            size="mini"
            style="width: 100%; font-size: 12px"
            border
          >
            <el-table-column
                    align="center"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
              prop="TYPENUM"
              label="题 型"
              header-align="center"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{scope.row.TYPENUM === 1 ? '单选': '多选'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="TITLE"
              label="题 目"
              header-align="center"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="DEPARTMENTNAME"
              label="院系"
              header-align="center"
              align="center"
              resizable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="TESTBASENAME"
              label="基地"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                    prop="TESTNAME"
                    label="实训室"
                    align="center"
                    show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="CREATEUSERNAME"
              label="创建人"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="CREATETIME"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{new Date(scope.row.CREATETIME).toLocaleString()}}
              </template>
            </el-table-column>
            <el-table-column
              prop="STATUS"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                {{scope.row.STATUS ? '启用': '禁用'}}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pagination.pageSize"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog
            title="题目信息"
            :visible.sync="addQuestionDialog"
            width="60%"
            center
    >
      <el-form
              ref="organizationReport"
              :model="questionReport"
              label-width="100px"
              label-position="right"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
                    label="题干"
                    prop="title"
                    :rules="[
                { required: true, message: '请输入题目！', trigger: 'blur' },
                { max: 100, message: '不得超出100个字符！', trigger: 'blur' }
              ]"
            >
              <el-input size="mini" v-model="questionReport.title" placeholder="请输入题干"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题型">
              <el-select clearable size="mini" v-model="questionReport.typeNum" placeholder="请选择题型">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-for="(list, i) in questionReport.selectList">
            <el-col :span="12">
              <el-form-item
                      label="选项"
                      class="addSelect"
                      :key="i"
                      :prop="'selectList.' + i + '.content'"
                      :rules="[
              { required: true, message: '请输入选项！', trigger: 'blur' },
              { max: 50, message: '不得超出50个字符！', trigger: 'blur' }
            ]"
              >
                <el-input size="mini" v-model="list.content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否正确答案">
                <el-select clearable size="mini" v-model="list.answer" placeholder="是否正确答案">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-top: 7px">
              <el-button size="mini" plain @click="addQuestion">添加</el-button>
              <el-button size="mini" plain @click="delQuestion(i)">删除</el-button>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitQuestion">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "questionBank",
  data() {
    return {
      addQuestionDialog: false,
      addDisable: true,
      questionReport: {
        title: '',
        typeNum: '1',
        selectList: [{content: '', answer: "0"}]
      },
      pagination: {
        pageSize: 20,
        total: 1,
        pageNo: 1
      },
      tableData: [],
      formInline: {},
      data: [],
      defaultProps: {
        children: 'list',
        label: 'NAME'
      },
      nodeData: {},
      addQuesData: {
        majorName: '',
        gradeNum: ''
      },
      departmentId: '',
      testBaseId: '',
      testId: '',
      isEdit: true,
      isFlag: ''
    }
  },
  created() {
    this.getTree();
    this.getTableData(this.pagination.pageSize, this.pagination.pageNo)
  },
  methods: {
    getTree() {
      this.$post('/public/findStructureByTestSafe').then(res => {
        this.data = res.data.data
      })
    },
    search() {
      let obj = Object.assign({}, this.formInline, this.pagination);
      this.$post('/examTopic/findExamTopic', obj).then(res => {
        this.tableData = res.data.data.dataList;
        this.pagination.total = res.data.data.total;
      })
    },
    getTableData(pageSize, pageNo) {
      this.$post('/examTopic/findExamTopic', {pageSize, pageNo}).then(res => {
        this.tableData = res.data.data.dataList;
        this.pagination.total = res.data.data.total;
      })
    },
    newAddQues() {
      this.isFlag = 'add';
      this.addQuestionDialog = true;
    },
    addQuestion() {
      this.questionReport.selectList.push({content: '', answer: "0"})
    },
    delQuestion(index) {
      if(this.questionReport.selectList.length === 1) {
        this.$message.error('至少有一个选项');
        return;
      }
      this.questionReport.selectList.splice(index, 1)
    },
    submitQuestion() {
      this.$refs['organizationReport'].validate((valid) => {
        if(valid) {
          let url = '';
          if(this.isFlag === 'edit') {
            this.questionReport.id = this.tableVal[0].ID;
            url = '/examTopic/update'
          } else if (this.isFlag === 'add') {
            url = '/examTopic/add'
          }
          this.questionReport.answer = '';
          for(let i = 0; i < this.questionReport.selectList.length; i++) {
            this.questionReport.answer += this.questionReport.selectList[i].content + '|||' + this.questionReport.selectList[i].answer + '@@@'
          }
          /*this.questionReport.departmentId = this.departmentId;
          this.questionReport.majorId = this.majorId;
          this.questionReport.gradeNum = this.gradeNum;*/
          this.questionReport.testId = this.testId;
          this.$post(url, this.questionReport).then(res => {
            if(res.data.status === 1) {
              this.addQuestionDialog = false;
              this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
              this.$message.success(res.data.msg);
              location.reload();
            } else {
              this.$message.error(res.data.msg)
            }
          });
        }
      });
    },
    cancel() {
      this.addQuestionDialog = false
    },
    editQues() {
      this.$post('/examTopic/findExamAnswer', {topicId: this.tableVal[0].ID}).then(res => {
        this.isFlag = 'edit';
        this.addQuestionDialog = true;
        this.questionReport.selectList = [];
        for(let i = 0; i < res.data.data.dataList.length; i++) {
          this.questionReport.selectList.push({
            content: res.data.data.dataList[i].MSG, answer: res.data.data.dataList[i].ISCORRECT.toString()
          })
        }
        this.questionReport.title = this.tableVal[0].TITLE;
        this.questionReport.typeNum = this.tableVal[0].TYPENUM.toString();
      })
    },
    treeNodeClick(self,node) {
      this.addDisable = true;
      this.nodeData = node;
      this.departmentId = '';
      this.testBaseId = '';
      this.testId = '';
      if(node.level === 1) {
        this.departmentId = node.data.ID;
      } else if(node.level === 2) {
        this.testBaseId = node.data.ID;
        this.departmentId = node.parent.data.ID;
      } else if(node.level === 3) {
        this.addDisable = false;
        this.testId = node.data.ID;
        this.testBaseId = node.parent.data.ID;
      }
      this.$post('/examTopic/findExamTopic', {
        departmentId: this.departmentId,
        testBaseId: this.testBaseId,
        testId: this.testId,
        pageSize: this.pagination.pageSize,
        pageNo: 1
      }).then(res => {
        this.tableData = res.data.data.dataList;
        this.pagination.total = res.data.data.total;
      })
    },
    handleSelectionChange(val) {
      this.tableVal = val;
      if(val.length === 1) {
        this.isEdit = false;
        this.testId = val[0].TESTID
      } else {
        this.isEdit = true
      }
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.getTableData(size, this.pagination.pageNo);
    },
    handleCurrentChange(page) {
      this.pagination.pageNo = page;
      this.getTableData(this.pagination.pageSize, page);
    }
  }
};
</script>

<style scoped lang="scss">
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
